<template>
	<view class="container">
		    <view class='header'>
		        <image src='/static/logo.png'></image>
		    </view>
		
		    <view class='content'>
		        <view>申请获取以下权限</view>
		        <text>获得你的公开信息(昵称，头像，地区及性别等)</text>
		    </view>
		
		    <button class="bottom" v-if="canUseGetUserProfile" hover-class="none" @tap="getUserProfile">微信登录</button>
		    <button class="bottom" v-else hover-class="none" open-type="getUserInfo" @getuserinfo="setUserInfo">微信登录</button>
		 
		</view>
	</view>
</template>

<script>
	import wxLocation from '../../common/locationAPI/wxLocation.js'
	export default {
		data() {
			return {
				title: '授权登录',
				canUseGetUserProfile: false,
			}
		},
		onLoad() {
			//判断是否存在getUserProfile方法
			if (uni.getUserProfile) {
			  this.$data.canUseGetUserProfile = true;
			}
			wxLocation.getLocation(); 
		},
		methods: {
			getUserProfile(){
				console.log("开始执行函数：bindGetUserInfo")
				//获取用户信息
				uni.getUserProfile({
					desc:'用户登录注册',
					success: (res1) => {
						this.$data.userInfo = res1.userInfo
						console.log("获取到的用户信息：" + this.$data.userInfo);
						
						//登陆
						wx.login({
							success:(res2)=>{
								if(res2.code){
									console.log("code:" + res2.code)
									wx.request({
										url:this.$url + 'userinfo/wxLogin',
										data:{
											code:res2.code,
											userName:res1.userInfo.nickName,
											imagePath:res1.userInfo.avatarUrl,
											sex:res1.userInfo.gender,
											longitude: this.$store.getters.user.longitude,
											latitude: this.$store.getters.user.latitude
										},
										method:'POST',
										header:{
											'content-type':'application/x-www-form-urlencoded'
										},
										success: (res)=> {
											console.log(res.data.data);
											this.$store.dispatch('changeUserInfo',res.data.data);										  
											//this.userInfo = res.data.data
											//跳转首页
											wx.switchTab({
												url:'/pages/first-pages/home-page/home-page'
											})
											
										  }
										
									})
								}else{
									console.log("登陆失败")
								}
							}
						})
					}
				})
			}
		}
		
	}
</script>

<style>
	.container{
		width: 100%;
		height: 80%;
	}
	.header {
	    margin: 90rpx 0 90rpx 50rpx;
	    text-align: center;
	    width: 650rpx;
	    height: 300rpx;
	    line-height: 450rpx;
	}
	
	.header image {
	    width: 200rpx;
	    height: 200rpx;
	}
	
	.content {
	    margin-left: 50rpx;
	    margin-bottom: 90rpx;
	}
	
	.content text {
	    display: block;
	    color: #9d9d9d;
	    margin-top: 40rpx;
	}
	
	.bottom {
	    border-radius: 80rpx;
		background-color: #19BE6B;
	    margin: 70rpx 50rpx;
	    font-size: 35rpx;
	}
</style>
